<template>
  <div class="lv">
	<div class="lvBanner">
		<mt-swipe :auto="4000">
		  <mt-swipe-item v-for="obj in arr" :key="obj.id">
			<img :src="obj.imgs" alt="">
		  </mt-swipe-item>
		</mt-swipe>
		<router-link to="/home">
			<i class="el-icon-arrow-left left"></i>
		</router-link>
	</div>

	<div class="theme">
		<div class="title">
			<h2>主题线路</h2>
			<p>更多<i class="el-icon-arrow-right"></i></p>
		</div>
		<div class="city">
			<ul>
				<li v-for="(obj,index) in arr1" @click="changeCity(index)" class="cityname">
					<p>{{obj.cityname}}</p>
				</li>
			</ul>
		</div>
		<div class="higo">
			<ul>
				<li v-for="obj in arr2" @click="ls">
					<img :src="obj.titlePic" alt="">
					<h4>{{obj.name}}</h4>
					<p>
						<span class="tag">{{obj.tag[0]}}</span>
						<span>{{obj.tag[1]}}</span>
						<span class="price">￥{{obj.price}}</span>
					</p>
				</li>
			</ul>
		</div>
	</div>

	<div class="theme">
		<div class="title">
			<h2>当地活动</h2>
			<p>更多<i class="el-icon-arrow-right"></i></p>
		</div>
		<div class="higo2">
			<ul>
				<li v-for="obj in arr3" @click="ls">
					<img :src="obj.titlePic" alt="">
					<h4>{{obj.name}}</h4>
					<p>
						<span class="tag">{{obj.tag[0]}}</span>
						<span>{{obj.tag[1]}}</span>
						<span class="price">￥{{obj.price}}</span>
					</p>
				</li>
			</ul>
		</div>
	</div>

	<div class="theme">
		<div class="title">
			<h2>游记攻略</h2>
			<p>更多<i class="el-icon-arrow-right"></i></p>
		</div>
		<div class="angel" v-for="obj in arr5">
			<img :src="obj.pic" alt="" class="anImg">
			<div class="p">
				<h5>{{obj.name}}</h5>
				<span class="tag"><img src="../assets/kan1.png" alt="">{{obj.readCount}}</span>
				<span><img src="../assets/zan1.png" alt="">{{obj.praiseCount}}</span>
			</div>
		</div>
		<div class="higo3">
			<ul>
				<li v-for="obj in arr4">
					<img :src="obj.pic" alt="">
					<h4>{{obj.name}}</h4>
					<p>
						<span class="tag"><img src="../assets/look.png" alt="">{{obj.readCount}}</span>
						<span><img src="../assets/zan.png" alt="">{{obj.praiseCount}}</span>
					</p>
				</li>
			</ul>
		</div>
	</div>

	<div class="theme">
		<div class="title">
			<h2>印象随笔</h2>
			<p>更多<i class="el-icon-arrow-right"></i></p>
		</div>
		<div class="higo4">
			<ul>
				<li v-for="obj in arr6">
					<img :src="obj.pic" alt="" class="picImg">
					<h2>{{obj.name}}</h2>
					<span class="span">{{obj.des}}</span>
					<p>
						<span><img src="../assets/look.png" alt="">{{obj.readCount}}</span>
						<span><img src="../assets/zan.png" alt="" class="img2">{{obj.goodCount}}</span>
					</p>
				</li>
			</ul>
		</div>
	</div>
  </div>
</template>

<script>
import $ from "jquery"
import touch from '../../static/touch/touch.js'
var listArr = [];
export default {
  name: 'lv',
  data () {
    return {
      arr:[],
      arr1:[],
      arr2:[],
      arr3:[],
      arr4:[],
      arr5:[],
      arr6:[]
    }
  },
  mounted:function(){
  	// banner数据
  	var url = 'http://javaapi.tgljweb.com:9090/api/travelhomepage/title';
	$.getJSON('geturl', {url:url}, (b)=>{
		this.arr = b.msg.data;
	})
	// 城市数据
	var url1 = 'http://javaapi.tgljweb.com:9090/api/travelhomepage/higocity';
	$.getJSON('geturl', {url:url1}, (b)=>{
		this.arr1 = b.msg.data;
		for(var i in this.arr1){
			listArr.push(this.arr1[i].citycode)
		}
	})
	//  higo数据
	var url2 = 'http://javaapi.tgljweb.com:9090/api/travelhomepage/higolist?citycode=110100';
	$.getJSON('geturl', {url:url2}, (b)=>{
		this.arr2 = b.msg.data;
	})

	// 主题活动拖拽
	touch.on(".higo ul","dragstart",function(e){
		var x = e.position.x - $(".higo ul").offset().left;
		touch.on(".higo ul","drag",function(ev){
			var l = ev.position.x-x;
			if (l>0) {
				l = 0;
			}
			if (l< -560) {
				l = -560
			}
			$(".higo ul").css("left",l);
		})
	})

	//  当地活动数据
	var url3 = 'http://javaapi.tgljweb.com:9090/api/travelhomepage/actlist?citycode=110100';
	$.getJSON('geturl', {url:url3}, (b)=>{
		this.arr3 = b.msg.data;
	})

	// 当地活动拖拽
	touch.on(".higo2 ul","dragstart",function(e){
		var x = e.position.x - $(".higo2 ul").offset().left;
		touch.on(".higo2 ul","drag",function(ev){
			var l = ev.position.x-x;
			if (l>0) {
				l = 0;
			}
			if (l< -500) {
				l = -500
			}
			$(".higo2 ul").css("left",l);
		})
	})

	// 游记攻略数据
	var url4 = 'http://javaapi.tgljweb.com:9090/api/travelhomepage/notelist';
	$.getJSON('geturl', {url:url4}, (b)=>{
		this.arr4 = b.msg.data;
		this.arr5.push(b.msg.data[0]);
	})

	// 游记攻略拖拽
	touch.on(".higo3 ul","dragstart",function(e){
		var x = e.position.x - $(".higo3 ul").offset().left;
		touch.on(".higo3 ul","drag",function(ev){
			var l = ev.position.x-x;
			if (l>0) {
				l = 0;
			}
			if (l< -280) {
				l = -280
			}
			$(".higo3 ul").css("left",l);
		})
	})

	// 印象随笔数据
	var url5 = 'http://javaapi.tgljweb.com:9090/api/travelhomepage/implist';
	$.getJSON('geturl', {url:url5}, (b)=>{
		this.arr6 = b.msg.data;
		console.log(this.arr6)
	})

  },
  methods:{
  	changeCity(i){
  		$('.cityname').eq(i).css({
  			'color':'green',
  			'borderBottom':'3px solid green'
  		}).siblings('li').css({
  			'color':'black',
  			'border':'none'
  		})
  		// 获取数据
  		var num = listArr[i];
  		var url = 'http://javaapi.tgljweb.com:9090/api/travelhomepage/higolist?citycode='+num;
		$.getJSON('geturl', {url:url}, (b)=>{
			this.arr2 = b.msg.data;
		})
  	},
  	ls(){
  		localStorage.setItem("name","4");
  		localStorage.setItem("aa","3");
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.lv{
	width: 100%;
	background: white;
	position: absolute;
	top:0;
	left: 0;
	z-index: 999;
	.lvBanner{
		width: 100%;
		height: 250px;
		img{
			width: 100%;
		}
		.left{
			position: absolute;
			left: 5px;
			top:5px;
			font-size: 20px;
			color:white;
		}
	}
	.theme{
		width: 100%;
		margin: 20px 0;
		.title{
			width: 100%;
			padding: 0 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			h2{
				font-size: 18px;
				font-weight: 500;	
			}
			p{
				color: #666;
			}
		}
		.city{
			width: 100%;
			padding: 10px 20px;
			margin-top: 15px;
			box-sizing: border-box;
			li{
				list-style: none;
				float: left;
				margin: 0 20px 0 0;
			}
			.cityname:nth-child(1){
				color: green;
				border-bottom: 3px solid green;
			}
		}
		.higo{
			width: 100%;
			padding: 25px 0;
			height: 420px;
			overflow: hidden;
			box-sizing: border-box;
			position: relative;
			ul{
				width: 9000px;
				position: absolute;
				top:10px;
				left: 0;
				li{
					list-style-type: none;
					width: 220px;
					float: left;
					margin: 0 0 0 20px;
					img{
						width: 100%;
					}
					p{
						margin: 15px 0;
						font-size: 13px;
						color: #666;
						.tag{
							margin-right: 10px;
						}
						.price{
							float: right;
							color: red;
						}
					}
				}
			}
		}
		.higo2{
			width: 100%;
			padding: 25px 0;
			height: 280px;
			overflow: hidden;
			box-sizing: border-box;
			position: relative;
			margin-top: 10px;
			ul{
				width: 9000px;
				position: absolute;
				top:10px;
				left: 0;
				li{
					list-style-type: none;
					width: 280px;
					float: left;
					margin: 0 0 0 20px;
					img{
						width: 100%;
					}
					p{
						margin: 15px 0;
						font-size: 13px;
						color: #666;
						.tag{
							margin-right: 10px;
						}
						.price{
							float: right;
							color: red;
						}
					}
				}
			}
		}
		.angel{
			width: 100%;
			position: relative;
			margin-top: 20px;
			padding:0 20px;
			box-sizing: border-box;
			.anImg{
				width: 100%;
			}
			.p{
				width: 70%;
				position: absolute;
				left: 50%;
				top:50%;
				margin-left:-35%;
				margin-top: -10%;
				color:white;
				background: rgba(0,0,0,0.5);
				padding: 20px;
				box-sizing: border-box;
				text-align: center;	
				h5{
					font-size: 15px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-weight: 500;
				}
				img{
					width: 9%;
					vertical-align: middle;
					margin: 0 8px;
				}
			}
		}
		.higo3{
			width: 100%;
			padding: 25px 0;
			height:190px;
			overflow: hidden;
			box-sizing: border-box;
			position: relative;
			margin-top: 10px;
			ul{
				width: 9000px;
				position: absolute;
				top:10px;
				left: 0;
				li{
					list-style-type: none;
					width: 150px;
					float: left;
					margin: 0 0 0 20px;
					img{
						width: 100%;
					}
					h4{
						font-size: 13px;
					}
					p{
						font-size: 13px;
						color: #666;
						text-align: right;
						margin-top: 10px;
						img{
							width:10%;
							vertical-align: middle;
							margin:0 8px;
						}
					}
				}
			}
			li:nth-child(1){
				display: none;
			}
		}
		.higo4{
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
			position: relative;
			ul{
				li{
					list-style-type: none;
					width:92%;
					margin: 25px 0 0 20px;
					.picImg{
						width: 50%;
						float: left;
						margin-right: 10px;
					}
					h2{
						font-size: 18px;
					}
					.span{
						display: block;
						height: 50px;
						line-height: 25px;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					p{
						font-size: 13px;
						color: #666;
						text-align: right;
						margin-top: 10px;
						margin-right: 10px;
						img{
							width:7%;
							vertical-align: middle;
							margin:0 8px;
						}
					}
				}
			}
			li:nth-child(1){
				margin-top: 20px;
				img{
					width: 100%;
				}
				h2{
					font-size: 18px;
					margin: 10px 0;
				}
				p{
					font-size: 13px;
					color: #666;
					text-align: right;
					margin-top: 10px;
					img{
						width:7%;
						vertical-align: middle;
						margin:0 8px;
					}
					.img2{
						width:6%;
					}
				}
			}
		}
	}
}
</style>
